<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            ul {
                padding: 20px;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <script>
            // 事件委托：优点：减少注册次数，利用事件冒泡 缺点：父的范围如果有大于子的范围，要if判断tagName，否则target可能不是想要的
            const ul = document.querySelector('ul')
            ul.addEventListener('click', function (e) {
                console.log('点击了')
                if (e.target.tagName === 'LI') {
                    e.target.style.color = 'red'
                }
            })

        </script>

    </body>
</html>